<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加法计算器</title>
    <script>
        function myck(type) {
            var inputNum1 = document.getElementById("num1");
            var inputNum2 = document.getElementById("num2");
            if(type==1) {
                // 1.非空判断
                if (inputNum1.value == "") {
                    alert("请先输入数字1");
                    return false;
                }
                if (inputNum2.value == "") {
                    alert("请先输入数字2");
                    return false;
                }
                // 2.加法操作
                var total = parseInt(inputNum1.value) + parseInt(inputNum2.value);
                // 3.将结果展现在最下面 div 中
                document.getElementById("resultDiv").innerHTML =
                    "<h2>计算结果：<strong style='color: chocolate;'>" + total + "</strong></h2>";
            }
            else if(type==2){
                if(confirm("是否确认清空")) {
                    // 清空数据
                    inputNum1.value = "";
                    inputNum2.value = "";
                    document.getElementById("resultDiv").innerHTML="";
                }
            }
        }
    </script>
</head>
<body>
<div style="text-align: center;margin-top: 100px;">
    <h1>加法计算器</h1>
    数字1：<input id="num1" type="number"> <p></p>
    数字2：<input id="num2" type="number"> <p></p>
    <div>
        <input type="button" value=" 计 算 " onclick="myck(1)">
        <input type="button" value=" 清 空 " onclick="myck(2)">
    </div>
    <div id="resultDiv" style="margin-top: 50px;">
    </div>
</div>
</body>
</html>